<template>
  <div>
    <div class="theme_box">
      <h3>小程序首页配置</h3>
      <div>
        <n-divider title-placement="left">轮播图</n-divider>
        <n-button @click="openCarouselDrawer" type="primary" style="margin-bottom:10px;">添加轮播图</n-button>
        <ocean :use="CarouselTable"></ocean>
        <n-divider title-placement="left">公告设置</n-divider>
        <n-button @click="openAdDrawer" type="primary" style="margin-bottom:10px;">添加公告</n-button>
        <ocean :use="AdTable"></ocean>
      </div>
    </div>
    <div class="theme_box">
      <h3>商品通用设置</h3>
      <ocean :use="Setting"></ocean>
      <n-button type="primary" @click="saveSetting">保存</n-button>
    </div>
    <ocean :use="carouselDrawer"></ocean>
    <ocean :use="adDrawer"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { GlobalAPI, MiniConfigAPI } from '@/app/api';
import { useDrawer, useForm, useTable } from '@/ocean';
import { ref } from 'vue';
import Form from './form/index.vue'
import { useDialog, useMessage } from 'naive-ui'

const message = useMessage();

const Setting = useForm({ cols: "3" });
Setting.item('配送费(元)', 'send').inputNumber();
Setting.item('包装费(元)', 'box').inputNumber();
Setting.item('配送范围(公里)', 'distance').inputNumber();

const CarouselData = ref([{ image: "", url: 'aaa' }])
const CarouselTable = useTable({ data: CarouselData.value });
CarouselTable.column("图片", "adImg").image();
CarouselTable.column("链接", "adImg");
CarouselTable.define({
  title: "跳转类型",
  render(row: any) {
    return <n-space>
      <n-gradient-text type="info">
        {row.obj!==null ? (row.obj?.text !==undefined ? '图文' : '商品') : ''}
      </n-gradient-text>
    </n-space>
  }
});
CarouselTable.define({
  title: "操作",
  render(row) {
    return <n-space>
      <n-button on-click={() => delCarousel(row)}>删除</n-button>
    </n-space>
  }
});

const AdTable = useTable();
AdTable.column("图片", "adImg").image();
AdTable.column("链接", "adImg");
AdTable.define({
  title: "跳转类型",
  render(row: any) {
    return <n-space>
      <n-gradient-text type="info">
        {row.obj!==null ? (row.obj?.text !==undefined ? '图文' : '商品') : ''}
      </n-gradient-text>
    </n-space>
  }
});
AdTable.define({
  title: "操作",
  render(row) {
    return <n-space>
      <n-button on-click={() => delAd(row)}>删除</n-button>
    </n-space>
  }
});

const carouselDrawer = useDrawer("添加轮播图", Form)
carouselDrawer.button('确定', { type: 'primary' }).click(() => {
  let formRef = carouselDrawer.getRef();
  let data = formRef.getModel()
  console.log(data)
  MiniConfigAPI.setCarousel(data).then(() => {
    queryCarouseList();
    carouselDrawer.close();
  });
})
carouselDrawer.button('取消').click(() => carouselDrawer.close())

const adDrawer = useDrawer("添加公告", Form)
adDrawer.button('确定', { type: 'primary' }).click(() => {
  let formRef = adDrawer.getRef();
  let data = formRef.getModel();
    console.log(data)
  MiniConfigAPI.setAd(data).then(() => {
    queryAdList();
    adDrawer.close();
  });
})
adDrawer.button('取消').click(() => adDrawer.close())

const openCarouselDrawer = () => {
  carouselDrawer.open();
}

const openAdDrawer = () => {
  adDrawer.open();
}

const delCarousel = (row) => {
  MiniConfigAPI.delCarsousel({ cfgId: row.id }).then(() => {
    message.success("删除成功")
    queryCarouseList();
  })
}

const delAd = (row) => {
  MiniConfigAPI.delAd({ id: row.id }).then(() => {
    message.success("删除成功")
    queryAdList();
  })
}

const queryCarouseList = () => {
  MiniConfigAPI.queryCarouselList().then(res => {
    CarouselTable.setData(res.data);
  })
}

const queryAdList = () => {
  MiniConfigAPI.queryAdList().then(res => {
    AdTable.setData(res.data)
  })
}

const querySetting = () => {
  MiniConfigAPI.getSetting().then(res => {
    Setting.setModel({
      ...res.data
    })
  })
}

const saveSetting = () => {
  MiniConfigAPI.saveSetting(Setting.model).then(() => {
    message.success("设置成功");
  })
}


queryCarouseList();
queryAdList();
querySetting();




</script>
<style lang="scss" scoped>
.theme_box {
  margin-bottom: 20px;

  >h3 {
    margin-bottom: 20px;
  }
}

.add {
  background: #fafafa;
  border: 1px dashed #ccc;
  margin-left: 10px;
  border-radius: 5px;
}
</style>